@charset "utf-8";
  
.introContainer{
	box-sizing:border-box;
	margin-bottom: 30px;
	.intoImg{
		width: 29%;
		float: left;
		box-sizing: border-box;
		margin-left: 1%;
		box-sizing:border-box;
		img{
			width: 100%;
		}
	}
	.introContext{
		font-size: 1.3em;
		box-sizing:border-box;
		text-align: left;
		width: 70%;
		float: left;
		position: relative;
		padding: 0 2%;
		content{
			float: left;
		}
		strong{
			color: #75ce66;
		}
	}
	
}

.timelineContainer{
	 font-size: 1.3em;
	 margin-top: 20px;
	 padding-top: 20px;
	 box-sizing: border-box;
	 background-color: #E9F0F5;
	 position: relative;
	 .timeline{
	 	 box-sizing: border-box; 
	 	 width: 100%;
	 	 margin-bottom: 30px;
	 	 position: relative;
		 .timelineTypePicContainer{
		 	width: 8%;
		 	background-color:#75ce66;
		 	border-radius: 50%;
		 	float: left;
		 	position: relative;
		 	box-sizing: border-box; 
		 	.typeImg{
				width: 60%;
				border-radius: 50%;
				position: absolute;
				top: 20%;
				left: 20%;
		 	}
		 }
		 .timelineContentContainer{
		 	text-align: left;
			float: left;
			width: 87%;
			margin-left: 3%;
			position: relative;
			box-sizing: border-box; 
			background-color: white;
			
			.content{
				p{
					width: 92%;
					padding-left: 4%;
				}
				img{
					width: 100%;
				}
			}
			.date-div{
				width: 92%;
				padding-left: 4%;

				.reporter{
					img{
						width: 40px;
					}

				}
				.cd-date{
					float: left;
					color: #b8b8b8;	
				}


			}

			.date-div:after{
				 content: " ";
			      display: block;
			      clear: both;
			      height: 0;
			}

			

			.video_box{
				width : 100%;
				font-size: 1.3em;
				video{
					width : 100%;
				}

				.clickmeLoadVideo{
					border:  2px solid #75ce66;
					border-radius: 5%;
					margin-left: 4%;
				}

			}
		 }
		 .timelineContentContainer::before {
			content: '';
			position: absolute;
			top: 5px;
			right: 100%;
			height: 0;
			width: 0;
			border: 10px solid transparent;
			border-right: 10px solid white;
		}
	 }

		
	
}

.timelineContainer::before {
	content: '';
	position: absolute;
	top: 0;
	left: 3.5%;
	height: 100%;
	width:  1%;
	background: #d7e4ed;
}




.clearfix:after {
      content: " ";
      display: block;
      clear: both;
      height: 0;
}

.date-tab-container{
	font-size: 1.3em;
	font-weight: bold;
	box-sizing:border-box;
	.tab{
		float: left;
		background-color: #d7e4ed;
		color: black;
		margin-left: 0.8em;
	}
	.pleaseChooseDate{
		float: left;
	}
	.refresh{
		float: left;
		margin-left: 20px;
		i{
			color:#75ce66;
		}
	}
}



  
 